<template>
	<view class="body">
		<myHead :title="title" />
		<scroll-view scroll-y="true" class="scroll-Y sv" :style="'{height:'+navHeight+'px}'">
			<uni-forms style="margin-top: 5%;" :value="addMeeting" ref="form" :rules="rules">
				<uni-forms-item label="会议名称" name="meetName" :required="true">
					<uni-easyinput :required="true" type="text" v-model="addMeeting.meetName" placeholder="请输入会议名称" />
				</uni-forms-item>
				<uni-forms-item class="addTask" label="执行人" name="taskList">
					<picker :value="executorsIndex"
						:range="executors" range-key="userName" @change="e_select">
						<view class="uni-input">{{executors[executorsIndex].userName}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="会议文件" name="filesupload">
					<uni-file-picker 
					    v-model="filesupload" 
						ref="files"
					    fileMediatype="all" 
						:auto-upload="false"
					    mode="grid" 
					    @select="select" 
					    @delete="progress" 
					    @success="success" 
					/>
				</uni-forms-item>

			</uni-forms>
		</scroll-view>

		<button class="bottom" @click="submitForm">提交</button>
		<button class="bottom" @click="restDate()">重置</button>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	import {
		addVolunteerMeeting
	} from '../../api/api_voluntee.js'
	import {
		getGroupUser
	}
	from '../../api/api_party_meeting.js'
	export default {
		data() {
			return {
				rules:{
					meetName:{
						rules:[{errorMessage: '请输入会议名称', required: true,},],
						},
						}
							,
				executorsIndex:0,
				executors: [],
				roleCode: "",
				pH: 0, //窗口高度
				navHeight: 0, //元素的所需高度
				title: "新增会议纪要",
				userList: [],
				filesupload: [],
				img:[],
				addMeeting: {  //新增会议
					meetName: '', //会议标题
					planUser: '', //创建人
					files: [], //会议文件
					meetDesc: '',
				},
				taskList: [],
				filesDetails: {
					listStyles: {
						"borderStyle": {
							"color": "#eee", // 边框颜色
							"width": "1px", // 边框宽度
							"style": "solid", // 边框样式
							"radius": "5px" // 边框圆角，不支持百分比
						},
						"border": false, // 是否显示边框
						"dividline": true // 是否显示分隔线
					},
					imageStyles: {
						"height": 60, // 边框高度
						"width": 60, // 边框宽度
						"border": { // 如果为 Boolean 值，可以控制边框显示与否
							"color": "#eee", // 边框颜色
							"width": "1px", // 边框宽度
							"style": "solid", // 边框样式
							"radius": "50%" // 边框圆角，支持百分比
						}
					}

				},
				extension1: ['doc', 'pdf', 'docx', 'doc'],
				extension: ['doc', 'pdf', 'docx', 'doc', 'png', 'jpg', 'jpeg'],
			}
		},
		computed:{
		},
		components: {
			myHead: myHeader,
		},
		methods: {
			e_select(e){
				 this.executorsIndex = e.target.value
				 this.addMeeting.planUser = this.executors[this.executorsIndex].userId
			},
			restDate() {
				this.addMeeting = { //新增会议
					meetName: '', //会议标题
					planUser: '', //创建人
					files: [], //会议文件
					meetDesc: '',
				}
				this.filesupload = [];
				this.taskList = [];
			},
			success(e){
				console.log(this.filesupload)
			},
			select(e){
				console.log(e)
				let _this = this
				let temp = e.tempFiles.filter(res=> {
					return this.extension.indexOf(res.extname)<0
				})
				if(temp.length>0){//判断是否可上传
					return uni.showToast({
						title:"请不要上传出图片、pdf、word之外的文件",
						duration:2000,
						icon:'none',
						success: () => {
							_this.img = [],
							_this.filesupload = []
						}
					})
				}
				let token = uni.getStorageSync('AuthToken')
				e.tempFiles.forEach((source,index)=>{
					uni.uploadFile({
						url: '/api/uploadFile', //仅为示例，非真实的接口地址
						filePath: e.tempFilePaths[index],
						name: 'file',
						header: {
							'x-access-token': token
						},
						formData: {
							'name': source.name,
							'size': source.size
						},
						success: (res) => {
							let a = JSON.parse(res.data).data;
							_this.addMeeting.files.push({
								baseFileId:a.id,
								baseFileUrl:a.url,
								fileName:a.fileName
							})
							console.log(JSON.parse(res.data).data)
						},
						fail: () => {
								uni.showToast({
									title:'文件上传失败',
									duration:2000,
									icon:'none'
								})
						}
					});
				})
			} ,
			progress(e){//删除
			console.log(e)
			let name =  e.tempFile.name
				let files = this.addMeeting.files.filter(e=>e.fileName==name); 
				let index = this.addMeeting.files.indexOf(files[0])
				this.addMeeting.files.splice(index, 1); 
			console.log(this.addMeeting.files)
			} ,
			fail(e){
				console.log("@fail",e)
			} ,
			submitForm() {
				this.$refs.form.submit().then(()=>{
				if (this.addMeeting.files.length>0) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '是否确定提交本次会议纪要？',
						success: function(res) {
							if (res.confirm) {
								addVolunteerMeeting(_this.addMeeting).then(res=>{
									uni.navigateBack()
									setTimeout(uni.showToast({
										title:"新增方案任务成功",
										icon:'success',
										duration:2000,
									}), 500)
									
								})
							} else if (res.cancel) {}
						}
					});
				} else {
					uni.showToast({
						title: "请上传会议纪要",
						duration: 2000,
						icon: 'none'
					})
				}
				
				})
			},
			filesclick() {
				let _this = this
				uni.chooseFile({
					count: 5 - _this.filesupload.length, //默认100
					extension: ['.doc', '.pdf', '.docx', '.doc', '.png', '.jpg', '.jpeg'],
					success: function(res) {
						let parma = [];
						console.log(res)
						res.tempFilePaths.forEach((e, index) => {
							parma.push({
								name: "files",
								file: res.tempFiles[index],
								url: e,
							})
						})
						console.log(parma)
						let token = uni.getStorageSync("AuthToken");
						uni.uploadFile({
							url: '/api/uploadMultipleFiles', //仅为示例，非真实的接口地址
							name: 'files',
							files: parma,
							header: {
								'x-access-token': token
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data)
								_this.filesupload.push(...(JSON.parse(uploadFileRes.data)
									.data)) //添加
							},
							fail: res => {
								console.log(res)
							}
						});
					}
				})
			}, 
		},
		onLoad(e) {
		},onReady() {
			let sysHeight = uni.getSystemInfoSync().windowHeight;  //动态高度
			this.navHeight = sysHeight * 0.8;
			console.log("sysHeight:" + this.style)
			// let that = this
			// uni.getSystemInfo({
			// 	success: function(res) { // res - 各种参数
			// 		console.log(res.windowHeight); // 屏幕的宽度
			// 		let info = uni.createSelectorQuery().select(".scroll-Y"); // 获取某个元素
			// 		info.boundingClientRect(function(data) { //data - 各种参数
			// 			console.log(data.height) // 获取元素宽度
			// 			let view = res.windowHeight - data.height
			// 			that.heightHome = view
			// 		}).exec()
			// 	}
			// });
			/**
			 * 加载用户
			 */
			getGroupUser({
				roleId:33
			}).then(res => {
				this.executors = res;
				 this.addMeeting.planUser = this.executors[this.executorsIndex].userId
			})

		},
	}
</script>
<style lang="scss" scoped>
	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
		background: linear-gradient(180deg, #ff5e59, #e20909);
		color: #fff;
	}

	.body {
		/deep/ .scroll-Y {
			width: 90%;
			margin: 0 auto;
		}
		.bottom{
			// position: relative;
			// bottom: -10%;
		}
		/deep/ .picker{
			.uni-forms-item__content{
				border: 1px solid #e5e5e5;
				border-radius: 4px;
			}
			uni-picker{
				padding: 10px;
			}
		}

		>/deep/ button {
			@include button-commit;
			// position:fix;
			// button:0;
			width: 90%;
			margin: 2% auto;
		}

		/deep/ .uni-table {
			min-width: 0 !important;
		}

		/deep/ .uni-grid-wrap {
			border: transparent;
			height: auto !important;

			.header {
				height: auto !important;
				min-height: 44px;
				background-color: #f8f8f8;
				position: relative;

				span {
					position: absolute;
					text-align: center;
					top: 25%;
					left: 35%;
				}
			}

			.content {
				height: auto !important;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 80% !important;
				height: 44px;
				margin-left: 5px;
				border-left: 1px rgb(229, 229, 229) solid;
				border: transparent;

				.uni-grid-item__box {
					border: transparent;
				}

				uni-view {
					background-color: #f9f9f9;

					span {
						text-align: left;
						display: inline-block;
						overflow: hidden;
					}

				}
				
			}
		}
	}
</style>
